<!--使用说明:
<ya-basic-list title="标题" index="id" :data=listData @select-item="handleSelectItem"></ya-basic-list>
title 为列表标题可以为空
index 为每个列表子项的唯一主键，不能为空
height list高度
bottom 距离底端距离
data: {
    {
      id, 主键
      icon, 图标
      content, 内容
      badge 数字
    }
}
暴露出一个入口data为传  如果需要更改该接口提供了4个插槽，分别为header, left，center，right，可以自定义其中的html元素
暴露出口select-item，返回值为传入的data[i]值
-->
<template>
  <el-card shadow="hover" :style="{height: autoHeight}" :body-style="{height: '100%',paddingBottom: '0 !important'}" >
    <div class="m-4">
      <h3 class="w-full text-center" type="primary" v-if="title">{{title}}</h3>
      <slot name="header">
      </slot>
    </div>
    <div ref="list" :style="{height: listHeight}">
      <el-scrollbar class="h-full">
        <template v-if="data.length>0">
          <div class="flex flex-col pb-2 w-full ya-base-list px-3"   v-for="item in data" :key=item @click="handleClickListItem(item)">
            <div class="flex justify-between items-center cursor-pointer w-full py-1 b-b ya-base-list--item" :class="{'is-active': item[index]===currentId}">
              <div class="flex items-center mb-2">
                <slot name="left">
                  <i :class=item.icon v-if="item.icon"></i>
                </slot>
                <slot name="center">
                  <span class="text-lg ml-3">{{item.content || '暂无内容'}}</span>
                </slot>
              </div>
              <slot name="right">
                <el-badge class="mt-1" :value=item.badge||0 v-if="item.badge"></el-badge>
              </slot>
            </div>
          </div>
        </template>
        <div v-else class="flex flex-col pb-2 w-full items-center">
          <h3 class="py-6" style="color:#ccc">列表数据为空</h3>
        </div>
      </el-scrollbar>
    </div>
  </el-card>
</template>

<script>
  export default {
    name: "ya-list",
    data() {
      return {
        currentId: "",
        headerHeight: 0
      }
    },
    props: {
      data: {
        type: [],
        required: true
      },
      title: {
        type: String
      },
      index: {
        type: String,
        default: "id",
        required: true
      },
      height: {
        type: Number,
      },
      bottom: {
        type: Number,
        default: 100
      }
    },
    watch: {
      autoHeight: function () {
        this.headerHeight = this.$refs.list?this.$refs.list.offsetTop:0
        return window.innerHeight - this.height - this.bottom + "px";
      }
    },
    computed: {
      listHeight: function () {
        return window.innerHeight - this.height - this.headerHeight - this.bottom + "px";
      }
    },
    methods: {
      handleClickListItem(item) {
        this.currentId = item[this.index];
        this.$emit('select-item',item);
      }
    },
  }
</script>

<style scoped lang="scss">
  .ya-base-list--item {
    transition: color 0.3s cubic-bezier(.645,.045,.355,1) !important;
    &.is-active {
      color: #409EFF;
      border-bottom: 3px solid #409EFF;
    }
    span,i {
      transition: color 0s cubic-bezier(.645,.045,.355,1) !important;
    }
  }
</style>
